<!--  -->
<template>
  <div class="todos">
    <div class="biaoti">
      <h1>T O D O S</h1>
    </div>
    <div class="neirong">
      <div class="header">
        <span @click.stop="dian(quan)" :class="[{ quan: quan }]">∨</span>
        <input
          type="text"
          placeholder="请输入内容"
          @keyup.enter.stop="saveTodo"
          v-model="shuju"
          v-focus
        />
      </div>
      <div class="mid">
        <div
          class="mid-item"
          v-for="(item, index) in filterTodos"
          :key="item.id"
        >
          <input type="checkbox" v-model="item.status" />
          <span
            :class="[
              { hidden: edit_index === index },
              { wancheng: item.status },
            ]"
            @dblclick.stop="editTodo(index)"
            >{{item.text}}</span
          >
          <input
            type="text"
            :class="[{ hidden: edit_index !== index }]"
            v-model="item.text"
            @blur.stop="saveEditTodo"
          />
          <span @click.stop="deleteTodo(index)">✖</span>
        </div>
      </div>
      <div class="footer">
        <span>还有 {{ changdu }} 个项目未完成</span>
        <div>
          <h3
            @click.stop="dianji('all')"
            :class="[{ active: activeTab === 'all' }]"
          >
            全部
          </h3>
          <h3
            @click.stop="dianji('wan')"
            :class="[{ active: activeTab === 'wan' }]"
          >
            未完成
          </h3>
          <h3
            @click.stop="dianji('wei')"
            :class="[{ active: activeTab === 'wei' }]"
          >
            已完成
          </h3>
        </div>
        <span @click.stop="shanchu">删除全部已完成项目</span>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      shuju: "",
      edit_index: -1,
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["filterTodos", "quan", "activeTab", "changdu"]),
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    shanchu : function(){
      this.$store.commit("deletAllTodo");
    },
    dianji: function (activeTab) {
      this.$store.commit({
        type: "changeActiveTab",
        payload: {
          activeTab : activeTab,
        },
      });
    },
    deleteTodo: function (index) {
      this.$store.commit({
        type: "deletTodo",
        payload: {
          index: index,
        },
      });
    },
    editTodo: function (index) {
      this.edit_index = index;
    },
    saveEditTodo: function () {
      this.edit_index = -1;
    },
    dian: function (keys) {
      this.$store.commit({
        type : "bian",
        payload : {
          keys : keys,
        }
      });
    },
    saveTodo: function () {
      if (!!this.shuju) {
        this.$store.commit({
          type: "addTodo",
          payload: {
            text: this.shuju,
            status: false,
            id: Date.now(),
          },
        });
      } else {
        this.$message({
          message: "输入不能为空",
          type: "warning",
        });
      };
      this.shuju = "";
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.todos {
  margin: 0 auto;
  width: 50vw;
  overflow-x: hidden;
  .biaoti {
    margin-bottom: 20px;
    h1 {
      text-align: center;
      color: tomato;
      opacity: 0.5;
    }
  }

  .neirong {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .quan {
        color: red;
      }
      span {
        cursor: pointer;
        flex: 1;
        border: 1px solid #ccc;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      input {
        flex: 9;
        height: 50px;
        border: #ccc 1px solid;
        outline: none;
      }
    }

    .mid {
      .mid-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        input[type="text"] {
          height: 40px;
          flex: 8;
        }
        input[type="checkbox"] {
          flex: 1;
          height: 20px;
        }
        span:nth-of-type(1) {
          flex: 8;
          height: 40px;
          line-height: 40px;
        }
        span:nth-of-type(2) {
          flex: 1;
          height: 40px;
          line-height: 40px;
          text-align: center;
          opacity: 0;
        }
        .hidden {
          display: none;
        }
        .wancheng {
          color: #ddd;
          text-decoration: line-through;
        }
      }
      .mid-item:hover {
        span:nth-of-type(2) {
          opacity: 1;
        }
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        height: 30px;
        flex: 1;
        text-align: center;
        line-height: 30px;
      }

      div {
        flex: 1;
        display: flex;
        justify-content: space-around;
        h3 {
          line-height: 30px;
          text-align: center;
        }
        .active {
          border: 1px solid tomato;
        }
      }
    }
  }
}
</style>
